<!DOCTYPE html>
<html lang="en">
<head>
    <title>${title}</title>
    <meta name=”keywords” content=”${keywords}”/>
    <meta name="description" content="${description}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="icon" type="image/x-icon" href="${ctxPath}/static/faviconTitle.ico"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- bootstrap-css -->
    <link href="${ctxPath}/static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <!--// bootstrap-css -->

    <!-- css -->
    <link rel="stylesheet" href="${ctxPath}/static/css/style.css" type="text/css" media="all"/>
    <link href="${ctxPath}/static/css/zhyd.comment.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/zhyd.core.css" rel="stylesheet">
    <!--// css -->
    <!-- font-awesome icons -->
    <link href="${ctxPath}/static/css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome icons -->
    <script src="${ctxPath}/static/js/jquery-1.11.1.min.js"></script>
    <script src="${ctxPath}/static/js/bootstrap.js"></script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
<!--banner-->
@include("../_header.html",{current:'在线留言'}){}
<div class="banner-top w3layouts-banner-top-message visible-lg-block visible-md-block" style="height: 570px">
</div>

<div class="banner-top visible-xs-block visible-sm-block"
     style="height: 300px;background: url('/static/images/mobile/message/banner.jpg') no-repeat 0 ;background-size: cover ">
</div>
<!--//banner-->

<div class="container-fluid" style="background-color: #E5E5E5;padding: 0">
    <div class="container" style="margin-top: 10px;">
        <div class="col-md-3 visible-md-block visible-lg-block">
            <div id="massage" style="z-index: 999;width: 200px;opacity: 0.8">
                @include("../container_left.html"){}
            </div>
        </div>
        <div class="col-md-9">
            <div class="visible-lg-block visible-md-block" style="height: 40px;width: 100%;line-height: 40px;">
                <div style="display: inline-block;border-left:8px solid #50c9a0;padding-left: 8px;height: 35px">
                    <span style="margin: 0;font-size: 21px;color: #474747">在线留言</span>
                </div>
                <!--面包屑 -->
                <div style="display: inline-block;float: right">
                    <ul style="list-style: none">
                        <li style="display: inline-block;">
                            <span style="color:#464646 ">您当前的位置：</span>
                            <a href="/index"
                               style="color: #464646; text-decoration: none;font-family: 'Roboto', sans-serif;">首页</a>
                            <span style="color:#464646 "> &nbsp>>&nbsp </span>
                        </li>
                        <li style="display: inline-block;color: #464646;font-family: 'Open Sans', sans-serif;letter-spacing: 1px">
                            在线留言
                        </li>
                    </ul>
                </div>
                <!--//面包屑 -->
            </div>
            <div class="visible-lg-block visible-md-block" style="margin-top: 70px;margin-bottom: 60px">
                <form style="margin:auto auto;align-content: center" id="messageForm">
                    <div style="margin: 15px auto;width: 85%">
                        <span style="font-size: 18px;color: #474747;vertical-align:top">姓名</span>&ensp;&ensp;&ensp;
                        <input style="margin-left:5%;background-color: transparent;width:80%;max-width: 500px;height: 30px;
                            border:1px solid #bdbdbd;vertical-align:top" type="text" id="inputName" name="name">
                        <span style="font-size: 20px;vertical-align:top;color:#a8a8a8 ">*</span>
                    </div>
                    <div style="margin: 15px auto;width:85%">
                        <span style="font-size: 18px;color: #474747;vertical-align:top">电话</span>&ensp;&ensp;&ensp;
                        <input style="margin-left:5%;background-color: transparent;width:80%;max-width: 500px;height: 30px;
                            border:1px solid #bdbdbd;vertical-align:top" type="text" id="inputPhone" name="phone">
                        <span style="font-size: 20px;vertical-align:top;color:#a8a8a8">*</span>
                    </div>
                    <div style="margin: 15px auto;width: 85%">
                        <span style="font-size: 18px;color: #474747;vertical-align:top">邮箱</span>&ensp;&ensp;&ensp;
                        <input style="margin-left:5%;background-color: transparent;width:80%;max-width: 500px;height: 30px;border:1px solid #bdbdbd;
                            vertical-align:top" type="email" id="inputEmail" name="email">
                    </div>
                    <div style="margin: 20px auto;width: 85%">
                        <span style="font-size: 18px;color: #474747;vertical-align:top">内容</span>&ensp;&ensp;&ensp;
                        <textarea
                                style="margin-left:5%;background-color: transparent;width:80%;max-width: 500px;border:1px solid #bdbdbd;vertical-align:top"
                                rows="4" id="inputContent" name="message"></textarea>
                        <span style="font-size: 20px;vertical-align:top;color:#a8a8a8">*</span>
                    </div>
                    <input type="reset" name="reset" style="display: none;"/>
                </form>
                <div style="margin: 20px auto;text-align: center;width: 95%">
                    <button style="background-color: #50C9A0;width: 20%;border: transparent;height: 25px" id="submit">
                        <span style="font-size: 15px;color: #474747">提交留言</span>
                    </button>
                </div>
            </div>
            <div class="visible-xs-block visible-sm-block">
                <span class="mobile-title1">在线留言</span>
                <span class="mobile-title2">告诉我们你的想法&ensp;&ensp;专业团队帮您实现梦想洁具</span>
            </div>
            <div class="visible-xs-block visible-sm-block" style="width: 100%;margin: 40px auto">
                <form style="align-content: center" id="messageForm2">
                    <div style="margin-top: 20px">
                        <input class="form-control" style="border-radius: unset;border: 1px solid #ffffff" type="text"
                               id="inputName2" name="name" placeholder="姓名">
                    </div>
                    <div style="margin-top: 20px">
                        <input class="form-control" style="border-radius: unset;border: 1px solid #ffffff" type="text"
                               id="inputPhone2" name="phone" placeholder="电话">
                    </div>
                    <div style="margin-top: 20px">
                        <input class="form-control" style="border-radius: unset;border: 1px solid #ffffff" type="email"
                               id="inputEmail2" name="email" placeholder="邮箱">
                    </div>
                    <div style="margin-top: 20px">
                        <textarea class="form-control" style="border-radius: unset;border: 1px solid #ffffff" rows="5"
                                  id="inputContent2" name="message" placeholder="内容"></textarea>
                    </div>
                    <input type="reset" name="reset" style="display: none;"/>
                </form>
                <div style="margin-top: 20px;text-align: center;">
                    <button style="background-color: #50C9A0;height: 35px;width: 50%;color: white;" id="submit2">
                        <span style="font-size: 15px;vertical-align:middle">提交留言</span>
                        <span style="background-color:transparent;vertical-align:middle">
                        <img src="${ctxPath}/static/images/icon/rightwhite.png">
                    </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <style type="text/css">
        .text-tip {
            display: block;
            background: rgba(0, 0, 0, .7);
            color: #fff;
            padding: 10px 10px;
            line-height: 18px;
            position: fixed;
            left: 50%;
            bottom: 25%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            border-radius: 3px;
            display: none;
            z-index: 9999;
            font-size: 12px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        function textTip(str, t, callBack) {
            t = t || 2000;
            var dom = document.createElement("p");
            dom.setAttribute('class', 'text-tip');
            document.body.appendChild(dom);
            var mytip = document.querySelector('.text-tip')

            mytip.style.display = "block";
            mytip.innerHTML = str;
            var tipHeight = mytip.offsetHeight;

            //文字两行或两行以上
            if ((tipHeight - 20) / 18 > 1) {
                mytip.style.width = "55%";
            }
            setTimeout(function () {
                mytip.style.display = "none";
                mytip.parentNode.removeChild(mytip);
                if (callBack) {
                    callBack();
                }
            }, t);
        }

        $("#submit").on("click", function () {
            var name = $('#inputName').val();
            var phone = $('#inputPhone').val();
            var email = $('#inputEmail').val();
            var content = $('#inputContent').val();
            if (name == "" || phone == "" || content == "") {
                alert("请填写必填选项！");
            }else {
                var regu =/^[1][3|4|5|6|7|8|9][0-9]{9}$/;
                var te =  /^[0-9a-zA-Z\u4e00-\u9fa5]{10,}/;
                if (!regu.test(phone)) {
                    alert("请填写正确手机号！");
                }else if(!new RegExp(te).test(content)){
                    alert("消息不含特殊字符,且至少十位数！");
                }else{
                    var param = new Object();
                    param.name = name;
                    param.phone = phone;
                    param.message = content;
                    param.email = email;
                    $.ajax({
                        type: "post",
                        url: "/message/add",
                        dataType: 'json',
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(param),
                        success: function (result) {
                            if(result.code==1){
                                alert(result.msg);
                                $("input[type=reset]").trigger("click");
                            }else{
                                alert(result.msg);
                            }
                        }
                    })
                }

            }
        });
        $("#submit2").on("click", function () {
            var name = $('#inputName2').val();
            var phone = $('#inputPhone2').val();
            var email = $('#inputEmail2').val();
            var content = $('#inputContent2').val();
            if (name == "" || phone == "" || content == "") {
                textTip('除邮箱外必填', 2000);
            } else {
                var regu =/^^[1][3|4|5|6|7|8|9][0-9]{9}$/;
                var te =   /^[0-9a-zA-Z\u4e00-\u9fa5]{10,}/;
                if (!new RegExp(regu).test(phone)) {
                    textTip('请填写正确手机号', 2000);
                }else if(!new RegExp(te).test(content)){
                    textTip('消息不含特殊字符，且至少十位数！', 2000);
                }else{
                    var param = new Object();
                    param.name = name;
                    param.phone = phone;
                    param.message = content;
                    param.email = email;
                    $.ajax({
                        type: "post",
                        url: "/message/add",
                        dataType: 'json',
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(param),
                        success: function (result) {
                            if(result.code==1){
                                textTip(result.msg, 2000);
                                $("input[type=reset]").trigger("click");
                            }else{
                                textTip(result.msg, 2000);
                            }

                        },
                        error: function () {
                            textTip("提交失败！", 2000);
                        }
                    })
                }

            }
        });

    </script>
    <script src="${ctxPath}/static/js/exporting.js"></script>
    <script>
        $("input").click(function () {
            $(this).css("borderColor", "#50c9a0");
            $("input").not(this).css("borderColor", "#BDBDBD");
            $("textarea").css("borderColor", "#BDBDBD");
        });
        $("input").click(function (event) {
            event.stopPropagation();
        });
        $("textarea").click(function () {
            $(this).css("borderColor", "#50c9a0");
            $("input").css("borderColor", "#BDBDBD");
        });
        $("textarea").click(function (event) {
            event.stopPropagation();
        });
        $(document).click(function () {
            $("input").css("borderColor", "#BDBDBD");
            $("textarea").css("borderColor", "#BDBDBD");
        });


    </script>
</div>

<!-- footer -->
@include("../_footer.html"){}
<!-- //footer -->

<script src="${ctxPath}/static/js/jarallax.js"></script>
<script src="${ctxPath}/static/js/SmoothScroll.min.js"></script>
<script type="text/javascript">
    /* init Jarallax */
    $('.jarallax').jarallax({
        speed: 0.5,
        imgWidth: 1366,
        imgHeight: 768
    })
</script>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".scroll").click(function (event) {
            event.preventDefault();
            $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
        });
    });
</script>
<script src="${ctxPath}/static/js/responsiveslides.min.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/move-top.js"></script>
<script type="text/javascript" src="${ctxPath}/static/js/easing.js"></script>
<!-- here stars scrolling icon -->
<script type="text/javascript" src="${ctxPath}/static/js/scroller-menu.js"></script>
<!-- //here ends scrolling icon -->

</body>
</html>